<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.bankNo" placeholder="银行卡号" clearable></el-input>
      </el-form-item>
      <el-form-item>
       <el-select v-model="dataForm.type" clearable placeholder="请选择">
				 <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			 </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button
          type="primary"
          @click="addOrUpdateHandle()"
        >新增</el-button>
        <!-- <el-button
          v-if="isAuth('hotel:hotelseller:delete')"
          type="danger"
          @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0"
        >批量删除</el-button>-->
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border=""
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
	    <el-table-column prop="mdName" header-align="center" align="center" width="100" label="门店名称"></el-table-column>
      <el-table-column prop="type" header-align="center" align="center" width="250" label="账户类型">
		  <template slot-scope="scope">
			   <el-tag size="small" v-if="scope.row.type ==1">对私账号</el-tag>
			    <el-tag size="small" v-if="scope.row.type ==2">公有账号</el-tag>
		    <el-tag size="small"  v-if="scope.row.type ==3">私人账号</el-tag>
		  </template>
	  </el-table-column>
      <el-table-column prop="bankKhName" header-align="center" align="center" width="100" label="银行开户名">
      </el-table-column>
      <el-table-column prop="bankNo" header-align="center" align="center" width="100" label="银行卡号">
      </el-table-column>
      <el-table-column prop="khBank" header-align="center" align="center" width="300" label="开户银行"></el-table-column>
      <el-table-column prop="khPeopleid" header-align="center" align="center" label="开户人身份证号"></el-table-column>
      <el-table-column prop="khPhone" header-align="center" align="center" label="开户人手机号"></el-table-column>

      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <!--<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
	<el-dialog width="50%" :title="textMap[dialogStatus]" :visible.sync="addOrUpdateVisible" v-if="addOrUpdateVisible">
	 <branchstoreAdd  :id="id" :cancelReturn="cancelReturn" ></branchstoreAdd>
  </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import branchstoreAdd from "./branchstoreAdd.vue";
export default {
	components: {
	   branchstoreAdd
	},
  data() {
    return {
			options:[{
          value: '1',
          label: '对私账号'
        }, {
          value: '2',
          label: '公有账号'
        }, {
          value: '3',
          label: '私人账号'
        }],
		textMap: {
		  update: '编辑分院',
		  create: '创建分院'
		},
		 dialogStatus: 'create',
      stars: {
        "1": "一星级",
        "2": "二星级",
        "3": "三星级",
        "4": "四星级",
        "5": "五星级"
      },
	  id:"",
      dataForm: {
        bankNo: "",
        type: "",
		page:"",
		limit:""
      },

      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    };
  },

  created() {
  	   this.getDataList();
  },
  activated() {
    this.getDataList();
  },
  methods: {
    moment(date) {
      if (date) {
        return moment(date).format("YYYY-MM-DD");
      }
      return "--";
    },
    // 获取数据列表
    getDataList() {

		if(this.dataForm.type==null){
			this.dataForm.type="";
		}
		this.dataForm.page=this.pageIndex;
		this.dataForm.limit=this.pageSize;
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/branchstore/hotelseller/list"),
        method: "get",
        params: this.dataForm
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page;
          this.totalPage = data.page.length;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
	cancelReturn(){
		this.addOrUpdateVisible=false;
		 this.getDataList();
	},
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
		if(id==""||id==undefined){
			 this.dialogStatus = "create";
		}else{
		 this.dialogStatus = "update";
		}
    if(this.dialogStatus == "create"){
      this.id="";
      this.addOrUpdateVisible = true;
    }else{
      this.id=id;
      this.addOrUpdateVisible = true;
    }
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/branchstore/hotelseller/delete/"+id),
          method: "post",
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>
